<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阅后即焚</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 18px;
            color: #fff;
        }
        html, body {
            min-height: 100%;
            background-color: #000;
            background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
        }

        .main-group {
            box-sizing: border-box;
            max-width: 1100px;
            overflow: hidden;
            height: 100vh;
            padding: 300px 10em;
            margin: 0 auto;
        }

        .main-group .text,span {
            cursor: pointer;
            letter-spacing: 10px;
            height: 45px;
            line-height: 45px;
            font-size: 36px;
            box-sizing: border-box;
            text-shadow: 2px 2px #f3384e, 3px 3px #f3384e, 4px 4px #f3384e, 5px 6px #f3384e;
        }

        .main-group .text,span {
            position: relative;
            display: inline-block;
        }
        .ti{
            text-align: center;
            letter-spacing: 10px;
            height: 65px;
            line-height: 65px;
            font-size: 50px;
            visibility: visible;
            text-transform: uppercase;
            transform: rotate(-10deg);
            text-shadow: 2px 2px #533d4a, 3px 3px #533d4a, 4px 4px #533d4a, 5px 6px #533d4a;
        }

        .main-group span.action {
            animation: smoke 3.5s linear forwards;
            transform-origin: bottom;
        }

        @keyframes smoke {
            0% {
                opacity: 1;
                filter: blur(0);
                transform: translateX(0) translateY(0) rotate(0deg) scale(1);
            }
            50% {
                opacity: 1;
                pointer-events: none;
            }
            100% {
                opacity: 0;
                filter: blur(30px);
                transform: translateX(300px) translateY(-300px) rotate(380deg) scale(3);
            }

        }

    </style>
</head>
<body>
<div class="main-group" id="content">
    <div class="text">今天七夕了，你们都去约会了吧..</div>
    <div class="text">分享阅后即焚特效....</div>
</div>
</body>
<script type="text/javascript">
    window.onload=function (){
        function breakdown(){
            let textArr = document.querySelectorAll('.text');
            if(textArr){
                for (let i = 0; i < textArr.length; i++) {
                    let text = textArr[i];
                    text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");
                }
            }
        }
        function sleep(time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }
        async function burn(callback) {
            let span = document.querySelectorAll('span');
            for (let i = 0; i < span.length; i++) {
                await sleep(200).then(() => {
                    span[i].classList.add('action');
                });
            }
            if(callback){
                callback();
            }
        }

        function endText(){
            let endText = document.getElementById("content");
            endText.innerHTML="<div class='ti'>老铁，七夕快乐！！！👊</div>"
        }
        breakdown();
        setTimeout(() => {
            burn(endText);
        }, 1500);
    }
</script>
</html>
